<template>
    <!--方式一-->
    <a-row :gutter="10">
      <!--app部分-->
      <a-col :md="12" :sm="24">
        <a-card :bordered="false">
           <div class="containerDrag">
              <div style="overflow-y: auto;background-color:#fff;height:580px">
                  <!--轮播图-->
                  <div style="margin-top:5px;" @click="handleConfig">
                    <a-carousel autoplay :dots="false" v-if="carouselImgArr && carouselImgArr.length>0">
                      <div v-for="(data,index) in carouselImgArr" class="carouselDiv">
                        <img :src="data" style="width:100%;height:160px;">
                      </div>
                    </a-carousel>
                    <a-card v-else >
                      <a-empty>
                        <span slot="description"> 请配置APP基础信息! </span>
                      </a-empty>
                    </a-card>
                  </div>
                  <!--审核模块-->
                  <!-- <div>
                    <a-row>
                      <draggable @end="end" :options="{animation: 300}" v-model="approveDataSource" v-if="approveDataSource.length>0" filter=".unmover" animation="500">
                        <a-col class="gutter-row" :span="12" v-for="(data,index) in approveDataSource" :key="index">
                          <div class="gutter-box" @click="handleEdit(data)" @dblclick="dbClick()">
                            <div class="approveDiv" :class="{'setGray':data.status === '2','unmover':data.status === '2','error':data.status === '2'}">
                              <img  v-if="delShow" src="https://static.jeecg.com/files/del_1625995633443.png" class="delete" @click.stop="delItem(data.id)"/>
                              <img style="width:40px;height:40px;" :src="data.icon"/>
                              <div style="font-size:5px;white-space: nowrap">{{data.title}}<div>{{data.subTitle}}</div></div>
                            </div>
                          </div>
                        </a-col>
                      </draggable>
                    </a-row>
                  </div> -->
                  <!-- <div style="width:100%;height:15px;background:#F1F1F1;"></div> -->
                  <!--服务模块-->
                  <div v-for="(item,idx) in appConfigTypeList" :key="idx">
                  <div>
                    <div class="titleDiv">{{item.title}} </div>
                    <a-row>
                      <draggable @end="end" @add="add" :group="item.value" :options="{animation: 300}" v-model="item.dataSource"  filter=".unmover" animation="500">
                          <a-col class="gutter-row item" :span="6" v-for="(data,index) in item.dataSource"  :key="index" flex="1 1 200px" >
                            <div class="gutter-box" @click="handleEdit(data)"  @dblclick="dbClick()">
                              <div class="imgDiv" :class="{'setGray':data.status === '2','unmover':data.status === '2','error':data.status === '2'}">
                                <img  v-if="delShow" src="https://static.jeecg.com/files/del_1625995633443.png" class="delete" @click.stop="delItem(data.id)"/>
                                <img style="width:40px;height:40px;" :src="data.icon"/>
                                <div class="titleSpan">{{getTitle(data.title)}}</div>
                              </div>
                            </div>
                          </a-col>
                      </draggable>
                      <a-col class="gutter-row" :span="6" @click="handleAdd()">
                        <div class="gutter-box">
                          <div class="add"></div>
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                  <div style="width:100%;height:15px;background:#F1F1F1;"></div>
                </div>
                  <!--其他服务-->
                  <!-- <div>
                    <div class="titleDiv">其他服务</div>
                    <a-row>
                      <draggable @end="end" @add="add" group="service" :options="{animation: 300}" v-model="otherDataSource" v-if="otherDataSource.length>0" filter=".unmover" animation="500">
                        <a-col class="gutter-row" :span="6" v-for="(data,index) in otherDataSource"  :key="index">
                          <div class="gutter-box" @click="handleEdit(data)" @dblclick="dbClick()">
                            <div class="imgDiv" :class="{'setGray':data.status === '2','unmover':data.status === '2','error':data.status === '2'}">
                              <img  v-if="delShow" src="https://static.jeecg.com/files/del_1625995633443.png" class="delete" @click.stop="delItem(data.id)"/>
                              <img style="width:40px;height:40px;" :src="data.icon"/>
                              <span style="font-size:5px;white-space: nowrap">{{getTitle(data.title)}}</span>
                            </div>
                          </div>
                        </a-col>
                      </draggable>
                      <a-col class="gutter-row" :span="6" @click="handleAdd()">
                        <div class="gutter-box">
                          <div class="add"></div>
                        </div>
                      </a-col>
                    </a-row>
                  </div> -->
                <a-button @click="sureChange" type="primary" style="margin-top: 30px"  :disabled="typeSetDisabled">保存排版</a-button>
              </div>
           </div>
        </a-card>
      </a-col>
      <!--表单部分-->
      <a-col :md="12" :sm="24">
        <a-tabs v-model="activeKey">
          <a-tab-pane tab="配置信息" key="1">
            <a-card :bordered="false">
              <sys-app-config-form ref="appConfigForm" @ok="modalFormOk"></sys-app-config-form>
              <div class="anty-form-btn">
                <a-button @click="save('config')" type="primary" htmlType="button" icon="form">保存</a-button>
              </div>
            </a-card>
          </a-tab-pane>
          <a-tab-pane tab="菜单信息" key="2" forceRender>
            <a-card :bordered="false">
              <sys-app-route-form ref="appRouteForm" @ok="modalFormOk"></sys-app-route-form>
              <div class="anty-form-btn">
                <a-button @click="save('route')" type="primary" htmlType="button" icon="form">保存</a-button>
              </div>
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
</template>

<script>

  import draggable from 'vuedraggable'
  import SysAppRouteForm from './modules/SysAppRouteForm'
  import SysAppConfigForm from './modules/SysAppConfigForm'
  import { getAction,httpAction,deleteAction } from '@/api/manage'
  import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
  
  export default {
    name: 'SysAppRouteDrag',
    components: {
      SysAppRouteForm,
      SysAppConfigForm,
      draggable
    },
    data () {
      return {
        description: 'app路由管理页面',
        url: {
          list: '/api/erp/eoa/sysAppRoute/list',
          delete: '/api/erp/eoa/sysAppRoute/delete',
          getRouteList: '/api/erp/eoa/sysAppRoute/getRouteList',
          getNewRouteList:'/api/erp/eoa/sysAppRoute/getNewRouteList',
          queryAppConfig: '/api/erp/eoa/sysAppConfig/queryAppConfig',
        },
        dataSource:[],
        appConfigTypeList:[],
        commonDataSource:[],
        otherDataSource:[],
        approveDataSource:[],
        newDateSource:[],
        appConfig:null,
        carouselImgArr:[],
        delShow:false,
        time:null,
        type:'config' ,
        activeKey:'1',
        typeSetDisabled:true //排版按钮状态
      }
    },
    created() {
     this.initData()
     this.initConfigData();
    },
    methods: {
      initConfigData(){
        initDictOptions('app_deform_type').then((res) => {
          if (res.success) {
            let appConfigTypeList=res.result;
            for(var i=0 ;i<appConfigTypeList.length;i++){
              appConfigTypeList[i].dataSource=[];
            }
            this.appConfigTypeList=appConfigTypeList;
            console.log(this.appConfigTypeList);
          }
        })
      },
      initData(){
        this.loadConfig();
        this.loadData();
      },
      loadConfig(){
        getAction(this.url.queryAppConfig).then((res) => {
          if (res.success) {
            if(res.result){
              this.appConfig=res.result;
              let carouselImgStr = res.result.carouselImgJson
              var carouselImgArr = carouselImgStr.split(",")
              this.carouselImgArr=carouselImgArr;
              this.$refs.appConfigForm.edit(this.appConfig);
            }
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      loadData() {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        getAction(this.url.getNewRouteList).then((res) => {
          if (res.success) {
            let allDate = res.result;
            let appConfigTypeList=this.appConfigTypeList;
            // this.commonDataSource = allDate.filter(i=>i.type=='common');
            // this.otherDataSource = allDate.filter(i=>i.type=='other');
            // this.approveDataSource = allDate.filter(i=>i.type=='approve');
            for(var i=0;i<appConfigTypeList.length;i++){
              appConfigTypeList[i].dataSource=allDate[appConfigTypeList[i].value];
            }
            this.appConfigTypeList=appConfigTypeList;
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      handleAdd(){
        this.activeKey='2';
        this.$refs.appRouteForm.add();
        this.$refs.appRouteForm.disableSubmit = false;
      },
      handleEdit(record){
        clearTimeout(this.time);
        this.time = setTimeout(() => {
          this.activeKey='2';
          this.$refs.appRouteForm.resetForm("form");
          this.$refs.appRouteForm.edit(record);
          this.$refs.appRouteForm.disableSubmit = false;
        }, 200);
      },
      handleConfig(){
        this.activeKey='1';
      },
      modalFormOk() {
        this.initData();
      },
      add:function(e){
        this.typeSetDisabled=false;
      },
      end: function (evt) {
        console.log("拖动前的位置"+evt.oldIndex);
        console.log("拖动后的位置"+evt.newIndex);
        if(evt.oldIndex!==evt.newIndex){
          this.typeSetDisabled=false;
        }
      },
      sureChange(){
        //常用服务
        for(var i=0;i<this.commonDataSource.length;i++){
          this.commonDataSource[i].sort = i;
          this.commonDataSource[i].type = "common";
        }
        //其他服务
        for(var i=0;i<this.otherDataSource.length;i++){
          this.otherDataSource[i].sort = i;
          this.otherDataSource[i].type = "other";
        }
        //审核服务
        for(var i=0;i<this.approveDataSource.length;i++){
          this.approveDataSource[i].sort = i;
          this.approveDataSource[i].type = "approve";
        }
        //更新
        this.newDateSource = this.commonDataSource.concat(this.otherDataSource).concat(this.approveDataSource);
        let formDate={"newDateSource":this.newDateSource};
        httpAction("/api/erp/eoa/sysAppRoute/sortChange",formDate,"post").then((res)=>{
          if(res.success){
            this.typeSetDisabled=true;
            this.$message.success("更新成功");
            this.$refs.appRouteForm.syncForm();
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      save(type){
        if(type==='config'){
          this.$refs.appConfigForm.submitForm();
        }else{
          this.$refs.appRouteForm.submitForm();
        }
      },
      dbClick() {
        clearTimeout(this.time);
        this.delShow = !this.delShow;
      },
      delItem(id){
        if(!this.url.delete){
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        deleteAction(that.url.delete, { id: id }).then((res) => {
          if (res.success) {
            //重新计算分页问题
            that.initData();
            that.$refs.appRouteForm.syncForm(id);
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      getTitle(title){
        if(title.length>6){
          return title.substring(0,6) 
        }
        return title
      }
    }
  }
</script>
<style scoped>
  .containerDrag{
    text-align: center;
    width: 378px;
    height: 770px;
    margin: 20px auto 0;
    padding: 90px 25px 100px;
    background-image: url(https://static.jeecg.com/files/modile_162571234753.png);
    background-repeat: no-repeat;
    background-size: 378px 770px;
  }
  .imgDiv{
    position: relative;
    padding: 8px;
    border: 1px solid #d9d9d9;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /**
  未开启叉号样式
   */
  .error::before,
  .error::after {
    position: absolute;
    content: ' ';
    background-color: rgb(0 0 0 / 25%);
    width: 1.4px;
    height: 40px;
  }
  .error::before {
    transform: rotate(45deg);
  }
  .error::after {
    transform: rotate(-45deg);
  }
  .add {
    border: 1px solid;
    height: 75.5px;
    color: #ccc;
    transition: color .25s;
    position: relative;
  }
  .add::before{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    margin-left: -20px;
    border-top: 2px solid;
  }
  .add::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 40px;
    margin-top: -20px;
    border-left: 2px solid;
  }
  .ant-carousel >>> .slick-slide {
    text-align: center;
    height: 160px;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }
  .delete{
    width:20px;
    height:20px;
    border-radius:60%;
    position:absolute;
    top:-10px;
    right:-5px;
    z-index: 99;
  }
  .anty-form-btn {
    width: 100%;
    text-align: center;
  }
  .anty-form-btn button {
    margin: 0 5px;
  }
  .approveDiv{
    position: relative;
    padding: 8px;
    border: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
  }
  .gutter-box:hover{
    /*cursor:move;*/
  }
  /**
  *图标置灰样式
   */
  .setGray{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  }
  .setGray:hover{
    cursor:not-allowed;
    /*pointer-events:none; 禁止点击*/
  }
  .approveDiv span{
    margin:0 20px;
  }
  .titleDiv{
    text-align:left;
    margin:10px 15px;
  }
  .carouselDiv{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    height:160px;
  }
  .titleSpan{
    font-size:5px;
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
  }
  /*选中样式*/
  .chosen {
    border: solid 1px #3089dc !important;
  }
</style>
